<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

function mockClick() {
  console.log('模拟点击')
  // 获取屏幕中心点的坐标
  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2;

  // 模拟点击事件
  function simulateClick(x, y) {
    const clickEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true,
      clientX: x,
      clientY: y
    });

    // 找到屏幕中心点下的元素
    const element = document.elementFromPoint(x, y);
    console.log(element)
    if (element) {
      // 分派点击事件到该元素
      element.dispatchEvent(clickEvent);
    }
  }

  // 模拟一次点击
  simulateClick(centerX, centerY);

}



onMounted(() => {
  AMapLoader.load({
    key: "92a6644682c1c54799efda17658dca11", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.PolygonEditor", "AMap.MapboxVectorTileLayer"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      console.log(AMap)
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [104.14101336824194, 30.606388151093697], // 初始化地图中心点位置
        layers: [
          new AMap.TileLayer.RoadNet({
            zIndex: 7
          }),
          new AMap.TileLayer.Satellite(),
          new AMap.DistrictLayer.World({
            zIndex: 1,
            rejectMapMask: true
          })
        ]
      });


      // //异步加载工具条插件
      // AMap.plugin("AMap.ToolBar", function () {
      //   //在回调函数中实例化插件，并使用插件功能

      //   var toolbar = new AMap.ToolBar(); //创建工具条插件实例
      //   map.addControl(toolbar); //添加工具条插件到页面
      // });

      // AMap.plugin("AMap.Scale", function () {
      //   //在回调函数中实例化插件，并使用插件功能

      //   var scale = new AMap.Scale();
      //   map.addControl(scale);
      // });

      // AMap.plugin("AMap.PolygonEditor", function () {
      //   //在回调函数中实例化插件，并使用插件功能
      //   var polygonEditor = new AMap.PolygonEditor(); //要传参数
      //   // map.addControl(polygonEditor);
      // });
      var toolbar = new AMap.ToolBar(); //创建工具条插件实例
      map.addControl(toolbar); //添加工具条插件到页面
      var scale = new AMap.Scale();
      map.addControl(scale);
      // var polygonEditor = new AMap.PolygonEditor();
      // map.addControl(polygonEditor);

      map.plugin(["AMap.MouseTool"], function () {
        var mousetool = new AMap.MouseTool(map);
        // 使用鼠标工具，在地图上画标记点
        mousetool.polygon();


      });
      var globalVar = ['这是', '一个', '外部', '变量'];
      var mvtl = new AMap.MapboxVectorTileLayer({
        zIndex: 150,
        opacity: 1,
        // URL可以使用数据服务平台的服务，也可以使用自己发布的 MVT 数据服务
        // url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=您申请的key值&id=数据服务ID',
        url: 'https://www.digital-flying.com:1443/qlc_api/land-service/cropLand/getVectorTile/51/[z]/[x]/[y]',
        dataZooms: [2, 18],
        zooms: [2, 20],
        tileSize: 256,
        styles: {
          point: {
            // sourceLayer: 'default',
            sourceLayer: 'layer',

            visible: function (f, inject) {
              // 这里的 inject 参数就是一个数组，他的值就是 injection 字段的数组值：[visis]。
              return inject[0].indexOf('这是') > -1;
            },
            injection: [globalVar],
            radius: function (props) {
              return Math.random() * 20 + 5;
            },
            color: 'red',
            borderWidth: 20 || function (props) {
              return Math.random() * 5 + 2;
            },
            borderColor: 'rgba(255,255,255,1)',
          },
          polygon: {
            // sourceLayer: 'default',
            sourceLayer: 'layer',
            color: function (props) {
              return 'rgba(0,0,0,0.2)';
            },
            dash: [10, 0, 10, 0],
            borderColor: 'rgba(30,112,255,1)',
            borderWidth: 5,
          },
          line: {
            // sourceLayer: 'default',
            sourceLayer: 'layer',
            color: 'rgba(20,140,40,1)',
            lineWidth: 5,
            dash: [10, 0, 10, 0],
          },
          polyhedron: {
            // sourceLayer: 'default',
            sourceLayer: 'layer',
            topColor: 'rgba(230,230,230,0.9)',
            sideColor: 'rgba(240,240,240,0.9)',
          },
        }
      });
      map.add(mvtl);
      mvtl.show()

    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
  <button @click="mockClick">模拟点击</button>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>
